<script>
	// to hide errors
	let Tabs;
	let Tab;
	let isLoggedIn;
	let username;
</script>

<!-- 

  <Tabs>
    <Tab title="tab 1">Hey hey</Tab>
    {#if isLoggedIn}
		<Tab title="secret tab 2">Logged in content 1</Tab>
		<Tab title="secret tab 3">Logged in content 2</Tab>
    {/if}
    <Tab title={username}>info for {username}</Tab>
  </Tabs>
-->
<!-- alternative way, but we think just having an if statement to show or hide them feels better -->

<!-- <Tab shouldShow={isLoggedIn}>Tab content</Tab> -->
<style>
</style>

<script>
	import Tabs from "./Tabs.svelte";
	import Tab from "./Tab.svelte";
	let isLoggedIn;
	let username = "Henrik";
	let selectedTab = "2";
</script>

<div>
	<input type="checkbox" bind:checked={isLoggedIn} />
	<input type="text" bind:value={username} />
</div>

<button on:click={() => (selectedTab = "4")}>Change tab</button>

<Tabs bind:selectedTab>
	<Tab id="1" title="tab 1">Hey hey</Tab>
	{#if isLoggedIn}
		<Tab id="2" title="secret tab 2">Logged in content 1</Tab>
		<Tab id="3" title="secret tab 3">Logged in content 2</Tab>
	{/if}
	<Tab id="4" title={username}>info for {username}</Tab>
</Tabs>
<style>
</style>

<script>
	import { setContext } from "svelte";
	import { writable } from "svelte/store";
	// we want to be able to view one tab at a time
	export let selectedTab = "1";
	let selectedTabStore = writable(selectedTab);
	$: $selectedTabStore = selectedTab;
	// for making the bind: work
	$: updateProps($selectedTabStore);

	function updateProps(value) {
		selectedTab = value;
	}

	setContext("selectedTab", selectedTabStore);

	let titles = [];
	setContext("tabTitles", {
		registerTab(id, title) {
			// titles.push({ id, title });
			titles = [...titles, { id, title }].sort((a, b) => a.id - b.id);
		},
		updateTitle(id, title) {
			const tabIndex = titles.findIndex((title) => title.id === id);
			titles[tabIndex].title = title;
		},
		unregisterTab(id) {
			const tabIndex = titles.findIndex((title) => title.id === id);
			if (tabIndex > -1) {
				titles.splice(tabIndex, 1);
				titles = titles;
			}
		},
	});
</script>

<div>
	{#each titles as { id, title }}
		<!-- not reactive yet because context is not reactive across components, we need a store as well -->
		<button class:selected={$selectedTabStore === id} on:click={() => ($selectedTabStore = id)}
			>{title}</button>
	{/each}
</div>

<slot />

<style>
	button.selected {
		background: black;
		color: white;
	}
</style>